<template>
    <div>
        <!--发布/待办/办结卡片-->
        <div style="height: 100px;margin-top: 10px;">
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-card class="simplecard card-bg-color1">
                        <div class="simplecard-ctx">
                            <el-image class="simplecard-ctx-img" src="@/assets/images/default.png" :fit="fit" />
                            <div>
                                <div class="simplecard-ctx-right">我的发布</div>
                                <div class="simplecard-ctx-right">8条</div>
                            </div>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="8">
                    <el-card class="simplecard card-bg-color2">
                        <div class="simplecard-ctx">
                            <el-image class="simplecard-ctx-img" src="@/assets/images/default.png" :fit="fit" />
                            <div>
                                <div class="simplecard-ctx-right">待办审批</div>
                                <div class="simplecard-ctx-right">10条</div>
                            </div>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="8">
                    <el-card class="simplecard card-bg-color3">
                        <div class="simplecard-ctx">
                            <el-image class="simplecard-ctx-img" src="@/assets/images/default.png" :fit="fit" />
                            <div>
                                <div class="simplecard-ctx-right">我的办结</div>
                                <div class="simplecard-ctx-right">100条</div>
                            </div>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </div>

        <!--最新发布/最近访问-->
        <div style="margin-top: 20px;">
            <el-row :gutter="20">
                <el-col :span="12">
                    <div class="cus-card cus-card-h280">
                        <div class="cus-card-title">
                            <span style="color: #fff;">最新发布</span>
                            <span>
                                <el-link style="color: #fff;">更多&gt;&gt;</el-link>
                            </span>
                        </div>
                        <div class="cus-card-divider"></div>
                        <div class="cus-card-ctx">
                            <el-table :data="recentPublish" style="width: 100%; font-size: 14px;" :show-header="false">
                                <el-table-column prop="createTime" width="143" />
                                <el-table-column prop="product" width="130" show-overflow-tooltip />
                                <el-table-column prop="module" width="130" show-overflow-tooltip />
                                <el-table-column prop="title" show-overflow-tooltip />
                                <el-table-column fixed="right" label="操作" width="40">
                                    <template #default="scope">
                                        <el-button link type="primary" size="small"
                                            @click="onShowDetail(scope.$index, scope.row)">
                                            查看
                                        </el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div id="recent" class="cus-card cus-card-h280">
                        <div class="cus-card-title">
                            <span style="color: #fff;">最近访问</span>
                            <span>
                                <el-link style="color: #fff;">更多&gt;&gt;</el-link>
                            </span>
                        </div>
                        <div class="cus-card-divider"></div>
                        <div class="cus-card-ctx">
                            <el-row :gutter="20">
                                <el-col :span="8">
                                    <el-card>
                                        <div>
                                            <div>{{ recentProjects[0].code }}</div>
                                            <div>{{ recentProjects[0].name }}</div>
                                        </div>
                                    </el-card>
                                </el-col>
                                <el-col :span="8">
                                    <el-card>
                                        <div>
                                            <div>{{ recentProjects[1].code }}</div>
                                            <div>{{ recentProjects[1].name }}</div>
                                        </div>
                                    </el-card>
                                </el-col>
                                <el-col :span="8">
                                    <el-card>
                                        <div>
                                            <div>{{ recentProjects[2].code }}</div>
                                            <div>{{ recentProjects[2].name }}</div>
                                        </div>
                                    </el-card>
                                </el-col>
                            </el-row>
                            <el-row :gutter="10">
                                <el-col :span="8"><el-card>
                                        <div>
                                            <div>{{ recentProjects[3].code }}</div>
                                            <div>{{ recentProjects[3].name }}</div>
                                        </div>
                                    </el-card></el-col>
                                <el-col :span="8"><el-card>
                                        <div>
                                            <div>{{ recentProjects[4].code }}</div>
                                            <div>{{ recentProjects[4].name }}</div>
                                        </div>
                                    </el-card></el-col>
                                <el-col :span="8"><el-card>
                                        <div>
                                            <div>{{ recentProjects[5].code }}</div>
                                            <div>{{ recentProjects[5].name }}</div>
                                        </div>
                                    </el-card></el-col>
                            </el-row>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>

        <!--产品/模块的待办-->
        <div>
            <div v-if="projectExecutings && projectExecutings.length > 0">
                <div class="cus-card">
                    <div class="cus-card-title">
                        <span style="color: #fff;">待办统计</span>
                        <span></span>
                    </div>
                    <div class="cus-card-divider"></div>
                    <div class="cus-card-ctx">
                        <el-table :data="projectExecutings" row-key="id" border v-loading="loadingProjectExecuting"
                            style="width: 98%;" :show-header="false">
                            <el-table-column type="expand">
                                <template #default="scope">
                                    <div style="margin:0 10px 0 10px;">
                                        <el-space wrap :size="10">
                                            <el-card style="max-width: 200px;" v-for="item in scope.row.modules">
                                                <div v-if="item.count > 0" style="cursor: pointer;"
                                                    @click="gotoView('', null, item.id)">
                                                    <div>模块名称：{{ item.name }}</div>
                                                    <div>模块编码：{{ item.code }}</div>
                                                    <div>
                                                        待办数量：
                                                        <el-text class="mx-1" type="danger">{{ item.count }}个</el-text>
                                                    </div>
                                                </div>
                                                <div v-else>
                                                    <div>模块名称：{{ item.name }}</div>
                                                    <div>模块编码：{{ item.code }}</div>
                                                    <div>
                                                        待办数量： <el-text class="mx-1">{{ item.count }}个</el-text>
                                                    </div>
                                                </div>
                                            </el-card>
                                        </el-space>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column label="产品名称" prop="name" />
                            <el-table-column label="产品编码" prop="code" />
                            <el-table-column label="待办数量" width="150" prop="count" />
                        </el-table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>


<script setup lang="js">
import { onMounted, ref } from 'vue';

import appStorage from '@/stores/storage';
import { StorageKey } from '@/constant';


const recentPublish = ref([
    { id: "1", createTime: "2025/10/11 16:40", product: "产品1", module: "模块1", title: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" },
    { id: "2", createTime: "2025/10/11 16:40", product: "产品2", module: "模块2", title: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" },
    { id: "3", createTime: "2025/10/11 16:40", product: "产品3", module: "模块3", title: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" },
    { id: "4", createTime: "2025/10/11 16:40", product: "产品4", module: "模块4", title: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" },
    { id: "5", createTime: "2025/10/11 16:40", product: "产品5", module: "模块5", title: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" }
]);
const recentProjects = ref([
    { id: "1", code: "Project001", name: "001项目" },
    { id: "2", code: "Project002", name: "002项目" },
    { id: "3", code: "Project003", name: "003项目" },
    { id: "4", code: "Project004", name: "004项目" },
    { id: "5", code: "Project005", name: "005项目" },
    { id: "6", code: "Project006", name: "006项目" }
]);
const projectExecutings = ref([
    {
        id: "1", code: "Project001", name: "001项目", count: 20, modules: [
            { code: "AAA", name: "xxx模块", count: 3 },
            { code: "BBB", name: "xxx模块", count: 3 },
            { code: "CCC", name: "xxx模块", count: 3 },
            { code: "DDD", name: "xxx模块", count: 3 },
            { code: "EEE", name: "xxx模块", count: 3 },
        ]
    },
    {
        id: "2", code: "Project002", name: "002项目", count: 25, modules: [
            { code: "AAA", name: "xxx模块", count: 3 },
            { code: "BBB", name: "xxx模块", count: 3 },
            { code: "CCC", name: "xxx模块", count: 3 },
            { code: "DDD", name: "xxx模块", count: 3 },
            { code: "EEE", name: "xxx模块", count: 3 },
        ]
    },
    {
        id: "3", code: "Project003", name: "003项目", count: 30, modules: [
            { code: "AAA", name: "xxx模块", count: 3 },
            { code: "BBB", name: "xxx模块", count: 3 },
            { code: "CCC", name: "xxx模块", count: 3 },
            { code: "DDD", name: "xxx模块", count: 3 },
            { code: "EEE", name: "xxx模块", count: 3 },
        ]
    }
]);
const loadingProjectExecuting = ref(false);


onMounted(() => {
});
</script>


<style lang="less" scoped>
.simplecard {
    color: #fff;

    &-ctx {
        display: flex;
        flex-direction: row;
        justify-content: space-between;

        &-img {
            width: 50px;
            height: 50px;
        }

        &-right {
            text-align: center;
        }
    }
}

.card-bg-color1 {
    background-color: rgb(100, 150, 230);
}

.card-bg-color2 {
    background-color: rgb(175, 173, 29);
}

.card-bg-color3 {
    background-color: rgb(28, 168, 35);
}


.cus-card {
    border: 1px solid #e8e8e8;
    margin-bottom: 20px;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.4);

    &-title {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 0 5px;
        height: 50px;
        background-color: rgb(100, 150, 230);
    }

    &-divider {
        border-top: 1px solid #e8e8e8;
    }

    &-ctx {
        padding: 10px;
    }
}

.cus-card-h280 {
    height: 280px;
}

#recent {
    .el-card {
        font-size: 15px;
    }

    .el-row {
        margin-bottom: 20px;
    }

    .el-row:last-child {
        margin-bottom: 0;
    }
}
</style>